import React from "react";
import { Table, Tag } from "antd";
import { CheckCircleOutlined, MinusCircleOutlined } from "@ant-design/icons";
import EditTable from "./EditTable";
import EditJoin from "./EditJoin";
/**table列表属性 */

export default class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: props.dataSource,
      // total: props.total,
      changePage: props.changePage,
      current: props.current,
      changeSelect: props.changeSelect,
    };
  }

  /**复选框变化 */
  onSelectChange = (selectedRowKeys) => {
    this.props.changeSelect(selectedRowKeys);
  };

  render() {
    const { selectedRowKeys } = this.state;
    const { dataSource, current, getDataSource, rows, total } = this.props;

    const columns = [
      {
        title: "序号",
        dataIndex: "meetingKey",
        key: "meetingKey",
        width: 80,
      },
      {
        title: "状态",
        dataIndex: "enable",
        key: "enable",
        width: 100,
        render: (enable, record) => (
          <>
            <Tag
              icon={
                enable === 1 ? <CheckCircleOutlined /> : <MinusCircleOutlined />
              }
              color={enable === 1 ? "#87d068" : "default"}
            >
              {enable === 1 ? "启用" : "未启用"}
            </Tag>
          </>
        ),
      },
      {
        title: "日期",
        dataIndex: "meetingDate",
        key: "meetingDate",
        width: 120,
      },
      {
        title: "时间",
        dataIndex: "meetingTime",
        key: "meetingTime",
        width: 100,
      },
      {
        title: "地点",
        dataIndex: "meetingAddress",
        key: "meetingAddress",
        width: 150,
      },
      // {
      //   title: "会议室",
      //   dataIndex: "meetingRoom",
      //   key: "meetingRoom",
      //   width: 150,
      // },
      // {
      //   title: "提醒时间",
      //   dataIndex: "remindTime",
      //   key: "remindTime",
      //   width: 150,
      // },
      {
        title: "内容",
        dataIndex: "meetingContent",
        key: "meetingContent",
      },

      {
        title: "主持人",
        dataIndex: "meetingHost",
        key: "meetingHost",
        width: 120,
        // //人员数据为json数组时
        // render: (_, record) => {
        //   let namelist = "";
        //   if (record.meetingHost.length > 1) {
        //     record.meetingHost.forEach(
        //       (item) => (namelist += "，" + item.name)
        //     );
        //     return <span>{namelist.slice(1)}</span>;
        //   } else {
        //     return <span>{record.meetingHost.name}</span>;
        //   }
        // },
      },
      {
        title: "参加人",
        dataIndex: "meetingJoin",
        key: "meetingJoin",
        ellipsis: true,
        width: 200,
        render: (_, record) => (
          <EditJoin
            getDataSource={getDataSource}
            record={record}
            page={current}
            rows={rows}
          />
        ),
        //人员数据为json数组时
        // render: (_, record) => {
        //   let namelist = "";
        //   if (record.meetingJoin.length > 1) {
        //     record.meetingJoin.forEach(
        //       (item) => (namelist += "，" + item.name)
        //     );
        //     return <span>{namelist.slice(1)}</span>;
        //   } else {
        //     return <span>{record.meetingJoin.name}</span>;
        //   }
        // },
      },
      {
        title: "",
        dataIndex: "action",
        key: "action",
        width: 100,
        render: (_, record) => (
          <EditTable
            getDataSource={getDataSource}
            record={record}
            page={current}
            rows={rows}
          ></EditTable>
        ),
      },
    ];

    /**选中的行 */
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    /**分页控制 */
    const PaginationProps = {
      showSizeChanger: true,
      total: total,
      showTotal: () => `共 ${total} 个会议`,
      onChange: (current) => {
        // console.log(current);
        this.props.changePage(current);
        this.setState({ current: current });
      },
      onShowSizeChange: this.props.changeRows,
      current: current,
    };

    return (
      <div>
        <Table
          dataSource={dataSource}
          pagination={PaginationProps}
          columns={columns}
          rowSelection={rowSelection}
          bordered
          className="meeting-table"
          scroll={{ y: 500 }}
        />
      </div>
    );
  }
}
